<!doctype html>
<html>
	<head>
		{% if detail.description %}
		<title>{{ name }}/{{ project }}: {{ detail.description }}</title>
		{% else %}
		<title>{{ name }}/{{ project }}</title>
		{% endif %}
		<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
		<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js"></script>
		<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css">
		<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.2.2/font/bootstrap-icons.css">
		<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js"></script>
	</head>
	<body>
		{% load static %}
		<nav class="navbar navbar-light bg-light">
			<div class="navbar-header">
				<a href="/" class="navbar-brand">
					<img src="{% static 'images/icon.png' %}" class="rounded-sm" width="30" height="30">
					mchub&nbsp;&nbsp;
				</a>
			</div>
			<form class="form-inline">
				<button class="btn btn-link"><a href="/">Explore</a></button>
				{% if not logined %}
				<button class="btn btn-outline-primary"><a href="/signup/">Sign up</a></button>
				{% endif %}
				{% if logined %}
				<div class="dropdown">
					<a class="dropdown-toggle" href="#" role="button" id="u" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
						<b class="bi bi-people-circle" style="font-size: 120%"></b>
					</a>
					<div class="dropdown-menu dropdown-menu-sm-right" aria-labelledby="u">
						<a href="#" class="dropdown-item"><span>Signed in as<br>
						<b>{{ username }}</b></span></a>
						<div class="dropdown-divider"></div>
						<a class="dropdown-item" href="#">Settings</a>
						<a class="dropdown-item" href="/logout/">Log out</a>
					</div>
				</div>
				{% endif %}
			</form>
		</nav>	
		<div>
			<div class="clearfix m-3 p-1">
				<h3 class="float-left p-1">
					<a href="#">{{ name }}</a> /
					<a href="/{{ name }}/{{ project }}">{{ project }}</a>
				</h3>
				<div class="float-right p-1">
					<button class="btn btn-sm btn-primary">
						Stars: {{ detail.stars }}
					</button>
				</div>
			</div>
			<ul class="nav nav-tabs p-1">
				<li class="nav-item">
					{% if tab == 'code' %}
					<a class="nav-link active" href="/{{ name }}/{{ project }}">
						<b class="bi bi-code" style="font-size: 120%"></b> Code
					</a>
					{% else %}
					<a class="nav-link" href="/{{ name }}/{{ project }}">
						<b class="bi bi-code" style="font-size: 120%"></b> Code
					</a>
					{% endif %}
				</li>
				<li class="nav-item">
					{% if tab == 'issues' %}
					<a class="nav-link active" href="/{{ name }}/{{ project }}/issues">
						<b class="bi bi-exclamation-circle" style="font-size: 120%"></b> Issues
					</a>
					{% else %}
					<a class="nav-link" href="/{{ name }}/{{ project }}/issues">
						<b class="bi bi-exclamation-circle" style="font-size: 120%"></b> Issues
					</a>
					{% endif %}
				</li>
				<li class="nav-item">
					{% if tab == 'wiki' %}
					<a class="nav-link active" href="#">
						<b class="bi bi-book" style="font-size: 120%"></b> Wiki
					</a>
					{% else %}
					<a class="nav-link" href="#">
						<b class="bi bi-book" style="font-size: 120%"></b> Wiki
					</a>
					{% endif %}
				</li>
				{% if logined %}
				{% if name == username %}
				<li class="nav-item">
					{% if tab == 'settings' %}
					<a class="nav-link active" href="#">
						<b class="bi bi-gear" style="font-size: 120%"></b> Settings
					</a>
					{% else %}
					<a class="nav-link" href="#">
						<b class="bi bi-gear" style="font-size: 120%"></b> Settings
					</a>
					{% endif %}
				</li>
				{% endif %}
				{% endif %}
			</ul>
			<div class="row mw-100">
				<div class="col-9 m-1 p-3">
				</div>
				<div class="col m-1 p-3">
					<div>
						<div class="clearfix">
							<h5 class="text-secondary float-left">About</h5>
							{% if logined %}
							<a class="float-right text-secondary" data-toggle="modal" data-target="#d">
								<b class="bi bi-gear" style="font-size: 100%"></b>
							</a>
							{% endif %}
						</div>
						{% if detail.description %}
						<p class="text-break text-wrap text-justify">{{ detail.description }}</p>
						{% endif %}
						{% if detail.website %}
						<a class="bi bi-link-45deg" href="{{ detail.website}}">
							{{ detail.website|truncatechars:20 }}
						</a>
						{% endif %}
						{% if not detail.description %}
						{% if not detail.website %}
						<i class="text-secondary">No description, website provided.</i>
						{% endif %}
						{% endif %}
						<hr>
					</div>
				</div>
			</div>
		</div>
		{% if logined %}
		<div class="modal fade" id="d" tabindex="-1" data-backdrop="static" aria-labelledby="dl" aria-hidden="true">
			<div class="modal-dialog modal-dialog-centered">
				<div class="modal-content">
					<div class="modal-header">
						<h5 class="modal-title" id="dl">Edit project details</h5>
						<button type="button" class="close" data-dismiss="modal" aria-label="Close">
							<span aria-hidden="true">&times;</span>
						</button>
					</div>
					<form action="/{{ name }}/{{ project }}/" method="post">
						{% csrf_token %}
						<div class="modal-body">
							<label class="mb-1" for="desp"><b>Description</b></label>
							<textarea class="form-control mb-3" id="desp" name="desp" rows="3" placeholder="Description">{{ detail.description }}</textarea>
							<label class="mb-1" for="website"><b>Website</b></label>
							<input class="form-control" id="website" name="website" placeholder="Website" value="{{ detail.website }}">
						</div>
						<div class="modal-footer">
						      <button class="btn btn-link" data-dismiss="modal">Cancel</button>
						      <button type="submit" class="btn btn-primary">Save changes</button>
					      </div>
				      </form>
				</div>
			</div>
		</div>
		{% endif %}
		<footer>
			<hr>
			<p class='m-1' id="footer">Build with <a href="https://www.djangoproject.com/">Django 3.1.4</a>.</p>
		</footer>
	</body>
</html>
